

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/zoro.jpg">
  <link rel="icon" href="/img/zoro.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#efb9b9">
  <meta name="description" content="">
  <meta name="author" content="AgoniLay">
  <meta name="keywords" content="">
  
  <title>TypeScript笔记 - AgoniLay的博客</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/arta.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->

  
<link rel="stylesheet" href="/css/scroller.css">
<link rel="stylesheet" href="/css/bynode.css">
<link rel="stylesheet" href="/css/mouse.css">



  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"agonilay.github.io","root":"/","version":"1.8.11","typing":{"enable":true,"typeSpeed":150,"cursorChar":"❤","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading2.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>AgoniLay</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" target="_self" role="button"
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="iconfont icon-bookmark"></i>
                索引
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                
                  
                  
                  
                  <a class="dropdown-item" href="/archives/">
                    <i class="iconfont icon-archive-fill"></i>
                    归档
                  </a>
                
                  
                  
                  
                  <a class="dropdown-item" href="/categories/">
                    <i class="iconfont icon-category-fill"></i>
                    分类
                  </a>
                
                  
                  
                  
                  <a class="dropdown-item" href="/tags/">
                    <i class="iconfont icon-tags-fill"></i>
                    标签
                  </a>
                
              </div>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/links/">
                <i class="iconfont icon-link-fill"></i>
                友链
              </a>
            </li>
          
        
          
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/img/zoro2.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h3" id="subtitle" title="TypeScript笔记">
              
            </span>

            
              <div class="mt-3">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-author" aria-hidden="true"></i>
      AgoniLay
    </span>
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-07-30 14:04" pubdate>
        2021年7月30日 下午
      </time>
    </span>
  
</div>

<div class="mt-1">
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      172
       分钟
    </span>
  

  
  
    
      <!-- 不蒜子统计文章PV -->
      <span id="busuanzi_container_page_pv" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="busuanzi_value_page_pv"></span> 次
      </span>
    
  
</div>

            
			
			
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">TypeScript笔记</h1>
            
            <div class="markdown-body">
              <p>在线文档：<a target="_blank" rel="noopener" href="https://24kcs.github.io/vue3_study">https://24kcs.github.io/vue3_study</a></p>
<h1 id="TypeScript"><a href="#TypeScript" class="headerlink" title="TypeScript"></a>TypeScript</h1><h2 id="初识"><a href="#初识" class="headerlink" title="初识"></a>初识</h2><h3 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h3><p>TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码</p>
<p><strong>TypeScript 是 JavaScript 的一个超集</strong>，主要提供了<strong>类型系统</strong>和<strong>对 ES6+ 的支持</strong>，它由 Microsoft 开发，代码 <a target="_blank" rel="noopener" href="https://github.com/Microsoft/TypeScript">开源于 GitHub (opens new window)</a> 上</p>
<h4 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h4><ul>
<li>始于JavaScript，归于JavaScript</li>
<li>强大的类型系统</li>
<li>先进的 JavaScript</li>
</ul>
<h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><p>命令行输入：</p>
<figure class="highlight php"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs php">npm i -g typescript<br></code></pre></div></td></tr></table></figure>

<p>检查安装：</p>
<figure class="highlight php"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs php">tsc -V<br>    &gt; Version <span class="hljs-number">4.3</span>.<span class="hljs-number">4</span><br></code></pre></div></td></tr></table></figure>

<h3 id="初体验"><a href="#初体验" class="headerlink" title="初体验"></a>初体验</h3><p>01_第一次的ts.ts</p>
<figure class="highlight typescript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs typescript">(<span class="hljs-function">()=&gt;</span> &#123;<br>    <span class="hljs-comment">// str这个参数是string类型的</span><br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHi</span>(<span class="hljs-params">str:<span class="hljs-built_in">String</span></span>) </span>&#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-string">&#x27;您好啊&#x27;</span> + str<br>    &#125;<br>    <span class="hljs-keyword">let</span> text = <span class="hljs-string">&#x27;张艺兴&#x27;</span><br>    <span class="hljs-built_in">console</span>.log(sayHi(text));<br>&#125;)()<br></code></pre></div></td></tr></table></figure>

<p>index.html 中直接引入了 ts 的文件，浏览器是会报错的（如果 ts 文件中只有单纯的 js 代码，是可以正常的引入及使用的）</p>
<p>如果有ts的语法，可以进行编译代码：</p>
<h4 id="手动编译代码"><a href="#手动编译代码" class="headerlink" title="手动编译代码"></a>手动编译代码</h4><figure class="highlight php"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs php">tsc 文件名<br></code></pre></div></td></tr></table></figure>

<p>将会生成对应的 js 文件，然后再 index.html 直接引入 js 文件即可</p>
<h4 id="自动编译代码（vccode中）"><a href="#自动编译代码（vccode中）" class="headerlink" title="自动编译代码（vccode中）"></a>自动编译代码（vccode中）</h4><ol>
<li><p>文件目录下终端运行：</p>
<figure class="highlight php"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs php">tsc --init<br></code></pre></div></td></tr></table></figure>

<p>自动初始化生成 tsconfig.json 文件</p>
</li>
<li><p>在其中做修改：</p>
<figure class="highlight json"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs json"><span class="hljs-string">&quot;compilerOptions&quot;</span>: &#123;<br>    <span class="hljs-attr">&quot;outDir&quot;</span>: <span class="hljs-string">&quot;./js&quot;</span>, <span class="hljs-comment">/* 把 ts 文件最终编译后，放在js的目录中 */</span><br>    <span class="hljs-attr">&quot;strict&quot;</span>: <span class="hljs-literal">false</span>,  <span class="hljs-comment">/* 不使用严格模式 */</span><br>&#125;<br></code></pre></div></td></tr></table></figure></li>
<li><p>启动监视任务，终端运行</p>
<p>单击 项目文件夹 选中，找到上方终端打开 运行任务    选择 tsc:监视 打开运行</p>
</li>
</ol>
<h4 id="类型注解"><a href="#类型注解" class="headerlink" title="类型注解"></a>类型注解</h4><p>一种轻量级的为函数或者变量添加的约束</p>
<figure class="highlight typescript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs typescript">(<span class="hljs-function">()=&gt;</span>&#123;<br>    <span class="hljs-comment">// str 是string类型的</span><br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">showMsg</span>(<span class="hljs-params">str:<span class="hljs-built_in">String</span></span>) </span>&#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-string">&#x27;床前明月光，&#x27;</span> + str<br>    &#125;<br>    <span class="hljs-comment">// msg 是一个数组</span><br>    <span class="hljs-keyword">let</span> msg = <span class="hljs-string">&#x27;疑似地上霜&#x27;</span><br>    <span class="hljs-comment">// let msg = 22</span><br>    <span class="hljs-comment">// 智能的错误提示信息</span><br>    <span class="hljs-built_in">console</span>.log(showMsg(msg))<br>&#125;)()<br></code></pre></div></td></tr></table></figure>

<h4 id="接口-类"><a href="#接口-类" class="headerlink" title="接口 - 类"></a>接口 - 类</h4><p>是一种能力，一种约束而已</p>
<h4 id="使用-webpack-打包-TS"><a href="#使用-webpack-打包-TS" class="headerlink" title="使用 webpack 打包 TS"></a>使用 webpack 打包 TS</h4><p>安装依赖</p>
<figure class="highlight php"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs php">npm i -D typescript<br>    <br>npm i -D webpack webpack-cli@<span class="hljs-number">3.3</span>.<span class="hljs-number">12</span> <br>webpack-dev-server<br>    <br>npm i -D html-webpack-plugin clean-webpack-plugin ts-loader cross-env<br></code></pre></div></td></tr></table></figure>

<p>配置打包命令</p>
<figure class="highlight json"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs json">&#123;<br>    <span class="hljs-attr">&quot;scripts&quot;</span>: &#123;<br>        <span class="hljs-attr">&quot;dev&quot;</span>: <span class="hljs-string">&quot;cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js&quot;</span>,<br>        <span class="hljs-attr">&quot;build&quot;</span>: <span class="hljs-string">&quot;cross-env NODE_ENV=production webpack --config build/webpack.config.js&quot;</span><br>    &#125;,<br>&#125;<br></code></pre></div></td></tr></table></figure>

<p>运行出现错误，尝试：</p>
<p>错误：</p>
<figure class="highlight php"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs php">internal/modules/cjs/loader.js:<span class="hljs-number">888</span><br>    <span class="hljs-keyword">throw</span> err;<br>	^<br><br><span class="hljs-built_in">Error</span>: Cannot find module <span class="hljs-string">&#x27;webpack-cli/bin/config-yargs&#x27;</span><br></code></pre></div></td></tr></table></figure>

<p>处理：</p>
<figure class="highlight php"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs php">npm uninstall webpack-cli<br>cnpm i webpack-cli@<span class="hljs-number">3.3</span>.<span class="hljs-number">12</span> -D<br></code></pre></div></td></tr></table></figure>



<p>报错：</p>
<figure class="highlight php"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs php">× ｢wds｣: Invalid configuration <span class="hljs-keyword">object</span>. Webpack has been initialized using a configuration <span class="hljs-keyword">object</span> that does not <span class="hljs-keyword">match</span> the API schema.<br>  - configuration.devtool should <span class="hljs-keyword">match</span> pattern <span class="hljs-string">&quot;^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$&quot;</span>.<br>    BREAKING CHANGE since webpack <span class="hljs-number">5</span>: The devtool option is more strict.<br>    Please strictly follow the order of the keywords in the pattern.<br></code></pre></div></td></tr></table></figure>

<p>处理：</p>
<p>webpack.config.js 文件中修改配置</p>
<figure class="highlight json"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs json">devtool: &#x27;eval-cheap-module-source-map&#x27;<br></code></pre></div></td></tr></table></figure>

<h2 id="常用语法"><a href="#常用语法" class="headerlink" title="常用语法"></a>常用语法</h2><h3 id="基础类型"><a href="#基础类型" class="headerlink" title="基础类型"></a>基础类型</h3><p>TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。</p>
<p>总结：ts 中变量一开始是声明类型，那么后期赋值的时候，只能用这个类型的数据，是不允许用其他类型的数据赋值给当前的这个变量中</p>
<h5 id="布尔类型"><a href="#布尔类型" class="headerlink" title="布尔类型"></a>布尔类型</h5><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 布尔类型   ------&gt; boolean</span><br><span class="hljs-comment">// let 变量名:数据类型 = 值</span><br><span class="hljs-keyword">let</span> flag:boolean = <span class="hljs-literal">true</span><br><span class="hljs-built_in">console</span>.log(flag);<br></code></pre></div></td></tr></table></figure>

<h5 id="数字类型"><a href="#数字类型" class="headerlink" title="数字类型"></a>数字类型</h5><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 数字类型   ------&gt; number</span><br><span class="hljs-keyword">let</span> a1: number = <span class="hljs-number">10</span>      <span class="hljs-comment">// 十进制</span><br><span class="hljs-keyword">let</span> a2: number = <span class="hljs-number">0b1010</span>  <span class="hljs-comment">// 二进制</span><br><span class="hljs-keyword">let</span> a3: number = <span class="hljs-number">0o12</span>    <span class="hljs-comment">// 八进制</span><br><span class="hljs-keyword">let</span> a4: number = <span class="hljs-number">0xa</span>     <span class="hljs-comment">// 十六进制</span><br></code></pre></div></td></tr></table></figure>

<h5 id="字符串类型"><a href="#字符串类型" class="headerlink" title="字符串类型"></a>字符串类型</h5><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 字符串类型 ------&gt; string</span><br><span class="hljs-keyword">let</span> str1:string = <span class="hljs-string">&#x27;床前明月光&#x27;</span><br><span class="hljs-keyword">let</span> str2:string = <span class="hljs-string">&#x27;小明去开窗&#x27;</span><br><span class="hljs-keyword">let</span> str3:string = <span class="hljs-string">&#x27;遇到一耳光&#x27;</span><br><span class="hljs-keyword">let</span> str4:string = <span class="hljs-string">&#x27;牙齿掉光光&#x27;</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">`<span class="hljs-subst">$&#123;str1&#125;</span>,<span class="hljs-subst">$&#123;str2&#125;</span>,<span class="hljs-subst">$&#123;str3&#125;</span>,<span class="hljs-subst">$&#123;str4&#125;</span>`</span>);<br></code></pre></div></td></tr></table></figure>

<h5 id="undefined-和-null"><a href="#undefined-和-null" class="headerlink" title="undefined 和 null"></a>undefined 和 null</h5><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">let</span> nud: <span class="hljs-literal">undefined</span> = <span class="hljs-literal">undefined</span><br><span class="hljs-keyword">let</span> nll: <span class="hljs-literal">null</span> = <span class="hljs-literal">null</span><br><span class="hljs-built_in">console</span>.log(nud);<br><span class="hljs-built_in">console</span>.log(nll);<br><span class="hljs-comment">// undefined 和 null 都可以做为其他类型的子类型，把 undefined 和 null 赋值给其他类型的变量</span><br><span class="hljs-keyword">let</span> num2: number = <span class="hljs-literal">undefined</span><br><span class="hljs-built_in">console</span>.log(num2); <span class="hljs-comment">// undefined</span><br></code></pre></div></td></tr></table></figure>

<p>赋值后报错是因为：在 tsconfig.js 中开启了严格模式</p>
<p>将 <code>&quot;strict&quot;: true</code> 更改为 <code>&quot;strict&quot;: false</code> 即可</p>
<h5 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h5><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 数组定义方式1</span><br><span class="hljs-comment">// let 变量名: 数据类型[] = [值1，值2]</span><br><span class="hljs-keyword">let</span> arr1: number[] = [<span class="hljs-number">10</span>,<span class="hljs-number">20</span>,<span class="hljs-number">30</span>,<span class="hljs-number">40</span>,<span class="hljs-number">50</span>]<br><span class="hljs-built_in">console</span>.log(arr1);<br><span class="hljs-comment">// 数组定义方式2：泛型方式</span><br><span class="hljs-comment">// let 变量名: Array&lt;数据类型&gt; = [值1，值2]</span><br><span class="hljs-keyword">let</span> arr2: <span class="hljs-built_in">Array</span>&lt;number&gt; = [<span class="hljs-number">100</span>,<span class="hljs-number">200</span>,<span class="hljs-number">300</span>]<br><span class="hljs-built_in">console</span>.log(arr2);<br></code></pre></div></td></tr></table></figure>

<p>数组定义后，里面的数据的类型必须和定义数组的时候的类型是一致的，否则有错误提示信息，也不会编译通过的</p>
<h5 id="元组"><a href="#元组" class="headerlink" title="元组"></a>元组</h5><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 元组类型：在定义数组的时候，类型和数据的个数一开始就已经限定了</span><br><span class="hljs-keyword">let</span> arr3: [string,number,boolean] = [<span class="hljs-string">&#x27;张艺兴&#x27;</span>, <span class="hljs-number">18.232</span>, <span class="hljs-literal">true</span>]<br><span class="hljs-built_in">console</span>.log(arr3);<br></code></pre></div></td></tr></table></figure>

<p>注意问题：元组类型在使用的时候，数据的类型的位置和数据的个数 应该和在定义元组时的数据类型及位置应该是一致的</p>
<h5 id="枚举"><a href="#枚举" class="headerlink" title="枚举"></a>枚举</h5><p><code>enum</code> 类型是对 JavaScript 标准数据类型的一个补充。 使用枚举类型可以为一组数值赋予友好的名字。</p>
<p>枚举里面的每个数据值都可以叫元素，每个元素都有自己的编号，编号是默认从 0 开始的，依次递增加 1</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">enum Color &#123;<br>    <span class="hljs-comment">// 枚举中的元素可以是中文的数据值，但是不推荐</span><br>    red = <span class="hljs-number">2</span>,<br>    green,<br>    blue<br>&#125;<br><span class="hljs-comment">// 定义一个 Color  的枚举类型的变量来接受枚举的值</span><br><span class="hljs-keyword">let</span> color: Color = Color.red<br><span class="hljs-built_in">console</span>.log(color); <span class="hljs-comment">// 2</span><br><span class="hljs-built_in">console</span>.log(Color.red, Color.green, Color.blue); <span class="hljs-comment">// 2 3 4</span><br><span class="hljs-built_in">console</span>.log(Color[<span class="hljs-number">3</span>]); <span class="hljs-comment">// green</span><br></code></pre></div></td></tr></table></figure>

<h5 id="any"><a href="#any" class="headerlink" title="any"></a>any</h5><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">let</span> str: any = <span class="hljs-number">100</span><br><span class="hljs-built_in">console</span>.log(str) <span class="hljs-comment">// 100</span><br>str = <span class="hljs-string">&#x27;年少不知富婆好，错把少女当成宝&#x27;</span><br><span class="hljs-built_in">console</span>.log(str) <span class="hljs-comment">// 年少不知富婆好，错把少女当成宝</span><br><span class="hljs-comment">// 当一个数组中要存储多个数据，个数不确定，类型不确定，此时也可以使用 any 类型来定义数组</span><br><span class="hljs-keyword">let</span> arr: any[] = [<span class="hljs-number">100</span>, <span class="hljs-string">&#x27;张艺兴&#x27;</span>, <span class="hljs-literal">true</span>]<br><span class="hljs-built_in">console</span>.log(arr); <span class="hljs-comment">// [100, &quot;张艺兴&quot;, true]</span><br><span class="hljs-comment">// 这种情况下也没有错误的提示信息</span><br><span class="hljs-comment">// console.log(arr[0].split(&#x27;&#x27;)); // 报错</span><br></code></pre></div></td></tr></table></figure>

<h5 id="void"><a href="#void" class="headerlink" title="void"></a>void</h5><p>在函数声明的时候，小括号的后面使用 :void ，代表的时该函数没有任何的返回值</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">showMsg</span>(<span class="hljs-params"></span>):<span class="hljs-title">void</span> </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;只要富婆把握住，连夜搬进大别墅&#x27;</span>)<br>    <span class="hljs-comment">// return null // 可行</span><br>&#125;<br>showMsg();<br><span class="hljs-built_in">console</span>.log(showMsg()); <span class="hljs-comment">// undifined</span><br><span class="hljs-comment">// 定义 void 类型的值，可以接收一个 undefined 的值，但是意义不大</span><br><span class="hljs-keyword">let</span> vd:<span class="hljs-keyword">void</span> = <span class="hljs-literal">undefined</span><br><span class="hljs-built_in">console</span>.log(vd) <span class="hljs-comment">// undefined</span><br></code></pre></div></td></tr></table></figure>

<h5 id="object"><a href="#object" class="headerlink" title="object"></a>object</h5><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 定义一个函数 参数是 object 类型，返回值也是 object 类型</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getObj</span>(<span class="hljs-params">obj:object</span>):<span class="hljs-title">object</span> </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(obj)<br>    <span class="hljs-keyword">return</span> &#123;<br>        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;张艺兴&#x27;</span>,<br>        <span class="hljs-attr">age</span>: <span class="hljs-number">20</span><br>    &#125;<br>&#125;<br><span class="hljs-built_in">console</span>.log(getObj(&#123;<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;张宝文&#x27;</span>, <span class="hljs-attr">age</span>: <span class="hljs-string">&#x27;男&#x27;</span>&#125;)) <span class="hljs-comment">// 必须参函数，且是对象类型</span><br><span class="hljs-comment">// console.log(getObj(&#x27;123&#x27;)) // 错误</span><br><span class="hljs-built_in">console</span>.log(getObj(<span class="hljs-built_in">String</span>)) <span class="hljs-comment">// 可以通过</span><br></code></pre></div></td></tr></table></figure>

<h5 id="联合类型"><a href="#联合类型" class="headerlink" title="联合类型"></a>联合类型</h5><p>联合类型（Union Types）表示取值可以为多种类型中的一种</p>
<p>例子：</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 需求1: 定义一个一个函数得到一个数字或字符串值的字符串形式值</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getString</span>(<span class="hljs-params">str:number|string</span>):<span class="hljs-title">string</span> </span>&#123;<br>    <span class="hljs-keyword">return</span> str.toString()<br>&#125;<br><span class="hljs-built_in">console</span>.log(getString(<span class="hljs-number">123</span>))   <span class="hljs-comment">// &#x27;123&#x27;</span><br><span class="hljs-built_in">console</span>.log(getString(<span class="hljs-string">&#x27;123&#x27;</span>)) <span class="hljs-comment">// &#x27;123&#x27;</span><br></code></pre></div></td></tr></table></figure>

<h5 id="类型断言"><a href="#类型断言" class="headerlink" title="类型断言"></a>类型断言</h5><p>通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。 TypeScript 会假设你，程序员，已经进行了必须的检查。</p>
<p>类型断言有两种形式。 其一是 <code>&lt;&gt;</code> 语法, 另一个为 <code>as</code> 语法</p>
<p><code>(&lt;string&gt;str)</code> &amp; <code>(str as string)</code> </p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getString</span>(<span class="hljs-params">str:number|string</span>):<span class="hljs-title">number</span> </span>&#123;<br>    <span class="hljs-comment">// return str.toString().length</span><br>    <span class="hljs-comment">// 如果说str本身就是string类型的,就没有必要toString()方法</span><br>    <span class="hljs-keyword">if</span> ((&lt;string&gt;str).length) &#123;<br>        <span class="hljs-comment">// str.length存在</span><br>        <span class="hljs-keyword">return</span> (str <span class="hljs-keyword">as</span> string).length<br>    &#125; <span class="hljs-keyword">else</span> &#123;<br>        <span class="hljs-comment">// 此时说明str是number类型</span><br>        <span class="hljs-keyword">return</span> str.toString().length<br>        <span class="hljs-keyword">return</span> <br>    &#125;<br>&#125;<br><span class="hljs-built_in">console</span>.log(getString(<span class="hljs-number">12345</span>)) <span class="hljs-comment">// 5</span><br><span class="hljs-built_in">console</span>.log(getString(<span class="hljs-string">&#x27;0123456&#x27;</span>)) <span class="hljs-comment">// 7</span><br></code></pre></div></td></tr></table></figure>

<h5 id="类型推断"><a href="#类型推断" class="headerlink" title="类型推断"></a>类型推断</h5><p>TS会在没有明确的指定类型的时候推测出一个类型</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">let</span> txt = <span class="hljs-number">100</span>  <span class="hljs-comment">// number类型</span><br>txt = <span class="hljs-string">&#x27;张艺兴&#x27;</span>  <span class="hljs-comment">// 报错</span><br><span class="hljs-built_in">console</span>.log(txt)<br></code></pre></div></td></tr></table></figure>

<p><img src="/2021/07/30/TypeScript%E7%AC%94%E8%AE%B0/image-20210625151306764.png" srcset="/img/loading2.gif" lazyload alt="image-20210625151306764"></p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">let</span> txt2   <span class="hljs-comment">// any类型</span><br>txt2 = <span class="hljs-number">100</span><br>txt2 = <span class="hljs-string">&#x27;张艺兴&#x27;</span><br><span class="hljs-built_in">console</span>.log(txt2); <span class="hljs-comment">// undefined -&gt; 100 -&gt; 张艺兴</span><br></code></pre></div></td></tr></table></figure>

<h3 id="接口"><a href="#接口" class="headerlink" title="接口"></a>接口</h3><p>TypeScript 的核心原则之一是对值所具有的结构进行类型检查。我们使用接口（Interfaces）来定义对象的类型。</p>
<p>接口是对象的状态(属性)和行为(方法)的抽象(描述)</p>
<h5 id="接口试探"><a href="#接口试探" class="headerlink" title="接口试探"></a>接口试探</h5><ul>
<li>只读：前面添加 readonly</li>
<li>可有可无：后面跟上 ?</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">(<span class="hljs-function">()=&gt;</span>&#123;<br>    <span class="hljs-comment">// 需求: 创建人的对象, 需要对人的属性进行一定的约束</span><br><br>    <span class="hljs-comment">// id是number类型, 必须有, 只读的</span><br>    <span class="hljs-comment">// name是string类型, 必须有</span><br>    <span class="hljs-comment">// age是number类型, 必须有</span><br>    <span class="hljs-comment">// sex是string类型, 可以没有</span><br><br>    <span class="hljs-comment">// 定义一个接口类型,该接口作为person的类型使用,限定或者是约束该对象中的属性数据</span><br>    interface IPerson &#123;<br>        <span class="hljs-comment">// id 是只读的  ------&gt; readonly 而不是 const</span><br>        readonly id:number,<br>        <span class="hljs-attr">name</span>:string,<br>        <span class="hljs-attr">age</span>:number,<br>        <span class="hljs-comment">// sex 可有可无 ------&gt; ?</span><br>        sex?:string<br>    &#125;<br><br>    <span class="hljs-comment">// 定义一个对象,该对象的类型就是我定义的接口 IPerson</span><br>    <span class="hljs-keyword">const</span> person:IPerson = &#123;<br>        <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,<br>        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;张艺兴&#x27;</span>,<br>        <span class="hljs-attr">age</span>: <span class="hljs-number">18</span><br>        <span class="hljs-comment">// sex: &#x27;男&#x27;</span><br>    &#125;<br><br>    <span class="hljs-built_in">console</span>.log(person)<br>    <span class="hljs-comment">// id属性现在是可读可写 要加 readonly属性</span><br>    <span class="hljs-comment">// person.id = 100</span><br>    person.sex = <span class="hljs-string">&#x27;男&#x27;</span><br>    <span class="hljs-built_in">console</span>.log(person)<br>&#125;)()<br></code></pre></div></td></tr></table></figure>

<h5 id="函数类型"><a href="#函数类型" class="headerlink" title="函数类型"></a>函数类型</h5><p>为了使用接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 函数类型：通过接口的方式作为函数的类型来使用</span><br><br><span class="hljs-comment">// 定义一个接口，用来作为某个函数的类型使用</span><br>interface ISearchFunc &#123;<br>    <span class="hljs-comment">// 定义一个调用签名</span><br>    (source:string, <span class="hljs-attr">subString</span>:string):boolean<br>&#125;<br><br><span class="hljs-comment">// 定义一个函数，该类型就是上面定义的接口</span><br><span class="hljs-keyword">const</span> seachString: ISearchFunc = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">source:string, subString:string</span>):<span class="hljs-title">boolean</span> </span>&#123;<br>    <span class="hljs-comment">// 在 source 字符串中查找 substring 这个字符串</span><br>    <span class="hljs-keyword">return</span> source.search(subString) &gt; -<span class="hljs-number">1</span><br>&#125;<br><br><span class="hljs-comment">// 调用函数</span><br><span class="hljs-built_in">console</span>.log(seachString(<span class="hljs-string">&#x27;哈哈，我又变帅了&#x27;</span>, <span class="hljs-string">&#x27;帅&#x27;</span>))<br></code></pre></div></td></tr></table></figure>

<h5 id="类类型"><a href="#类类型" class="headerlink" title="类类型"></a>类类型</h5><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 定义一个接口</span><br>interface IFly &#123;<br>    <span class="hljs-comment">// 该方法没有任何的实现（方法中什么都没有）</span><br>    fly()<br>&#125;<br><br><span class="hljs-comment">// 定义一个类，这个类的类型就是上面的接口（实际上也可以理解为，IFly接口约束了当前这个Person类）</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> <span class="hljs-title">implements</span> <span class="hljs-title">IFly</span> </span>&#123;<br>    <span class="hljs-comment">// 实现接口中的方法</span><br>    <span class="hljs-function"><span class="hljs-title">fly</span>(<span class="hljs-params"></span>)</span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;我会飞了，我是超人&#x27;</span>);<br>    &#125;<br>&#125;<br><br><span class="hljs-comment">// 实例化对象</span><br><span class="hljs-keyword">const</span> person = <span class="hljs-keyword">new</span> Person()<br>person.fly()<br></code></pre></div></td></tr></table></figure>

<h6 id="一个类可以实现多个接口"><a href="#一个类可以实现多个接口" class="headerlink" title="一个类可以实现多个接口"></a>一个类可以实现多个接口</h6><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 再定义一个接口</span><br>interface ISwim &#123;<br>    swim()<br>&#125;<br><br><span class="hljs-comment">// 定义一个类，这个类的类型就是Ifly和Iswim（当前这个类可以实现多个接口,一个类也可以同时被多个接口进行约束）</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person2</span> <span class="hljs-title">implements</span> <span class="hljs-title">IFly</span>,<span class="hljs-title">ISwim</span> </span>&#123;<br>    <span class="hljs-comment">// 实现接口中的方法</span><br>    <span class="hljs-function"><span class="hljs-title">fly</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;我飞了2&#x27;</span>);<br>    &#125;<br>    <span class="hljs-function"><span class="hljs-title">swim</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;我会游泳2&#x27;</span>);<br>    &#125;<br>&#125;<br><br><span class="hljs-comment">// 实例化对象</span><br><span class="hljs-keyword">const</span> person2 = <span class="hljs-keyword">new</span> Person2()<br>person2.fly()<br>person2.swim()<br></code></pre></div></td></tr></table></figure>

<h6 id="接口继承接口"><a href="#接口继承接口" class="headerlink" title="接口继承接口"></a>接口继承接口</h6><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 定义了一个接口，继承其他的多个接口</span><br>interface IMyFlyAndSwim <span class="hljs-keyword">extends</span> IFly,ISwim &#123; &#125;<br><br><span class="hljs-comment">// 定义一个类，直接实现这个接口</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person3</span> <span class="hljs-title">implements</span> <span class="hljs-title">IMyFlyAndSwim</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">fly</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;我飞了3&#x27;</span>);<br>    &#125;<br>    <span class="hljs-function"><span class="hljs-title">swim</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;我会游泳3&#x27;</span>);<br>    &#125;<br>&#125;<br><span class="hljs-keyword">const</span> person3 = <span class="hljs-keyword">new</span> Person3()<br>person3.fly()<br>person3.swim()<br></code></pre></div></td></tr></table></figure>

<p> 总结</p>
<ul>
<li>定义接口（使用的是 interface 关键字）</li>
<li>接口和接口之间叫继承（使用的是 extends 关键字）</li>
<li>类和接口之间叫实现（使用的是 implements 关键字）</li>
</ul>
<h3 id="类"><a href="#类" class="headerlink" title="类"></a>类</h3><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// ts 中类的定义及使用</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> </span>&#123;<br>    <span class="hljs-comment">// 定义属性</span><br>    <span class="hljs-attr">name</span>:string<br>    <span class="hljs-attr">age</span>:number<br>    <span class="hljs-attr">gender</span>:string<br>    <span class="hljs-comment">// 定义构造函数：未来将来实例化对象的时候，可以直接对属性的值进行初始化</span><br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">name:string=<span class="hljs-string">&#x27;张艺兴&#x27;</span>,age:number=<span class="hljs-number">18</span>,gender:string=<span class="hljs-string">&#x27;男&#x27;</span></span>)</span> &#123;<br>        <span class="hljs-comment">// 更新对象中的属性数据</span><br>        <span class="hljs-built_in">this</span>.name = name<br>        <span class="hljs-built_in">this</span>.age = age<br>        <span class="hljs-built_in">this</span>.gender = gender<br>    &#125;<br>    <span class="hljs-comment">// 定义实例方法</span><br>    sayHi (str:string) &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`大家好，我是<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.name&#125;</span>，今年已经<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.age&#125;</span>岁了，是个<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.gender&#125;</span>生，`</span> + str)<br>    &#125;<br>&#125;<br><br><span class="hljs-comment">// ts 中使用类，实例化对象，可以直接进行初始化操作</span><br><span class="hljs-keyword">const</span> person = <span class="hljs-keyword">new</span> Person(<span class="hljs-string">&#x27;张宝文&#x27;</span>, <span class="hljs-number">19</span>)<br>person.sayHi(<span class="hljs-string">&#x27;你叫什么？&#x27;</span>)<br></code></pre></div></td></tr></table></figure>

<h4 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h4><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 定义一个类，继承自上方Person</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Person</span> </span>&#123;<br>  	<span class="hljs-title">constructor</span> (<span class="hljs-params">name:string,age:number,gender:string</span>) &#123;<br>        <span class="hljs-comment">// 调用的是父类中的构造函数，使用的super</span><br>        <span class="hljs-built_in">super</span>(name,age,gender)<br>    &#125;<br><br>    <span class="hljs-comment">// 可以调用父类中的方法</span><br>    <span class="hljs-function"><span class="hljs-title">sayHi</span>(<span class="hljs-params"></span>)</span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;我是学生类中的sayHi方法&#x27;</span>);<br>        <span class="hljs-comment">// 带哦用父类中的sayHi方法</span><br>        <span class="hljs-built_in">super</span>.sayHi(<span class="hljs-string">&#x27;你呢&#x27;</span>)<br>    &#125;<br>&#125;<br><br><span class="hljs-comment">// 实例化 Student</span><br><span class="hljs-keyword">const</span> student = <span class="hljs-keyword">new</span> Student(<span class="hljs-string">&#x27;郑佳丽&#x27;</span>,<span class="hljs-number">19</span>,<span class="hljs-string">&#x27;女&#x27;</span>)<br>student.sayHi()<br></code></pre></div></td></tr></table></figure>

<p>总结：</p>
<ul>
<li>类和类之间如果要有继承关系，需要使用 extends 关键字</li>
<li>子类中可以调用父类中的构造函数，调用的是 super 关键字（包括调用父类中的实例方法，也可以使用super）</li>
<li>子类中可以重写父类中的方法</li>
</ul>
<h4 id="多态"><a href="#多态" class="headerlink" title="多态"></a>多态</h4><p>父类型的引用指向子类型的对象，不同类型的对象针对相同的方法，产生不同的行为</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 定义一个父类</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Animal</span> </span>&#123;<br>    <span class="hljs-comment">// 定义一个属性</span><br>    <span class="hljs-attr">name</span>:string<br>    <span class="hljs-comment">// 定义一个构造函数</span><br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">name:string</span>)</span> &#123;<br>        <span class="hljs-comment">// 初始化（更新属性值）</span><br>        <span class="hljs-built_in">this</span>.name = name<br>    &#125;<br>    <span class="hljs-comment">// 实例方法</span><br>    <span class="hljs-function"><span class="hljs-title">run</span>(<span class="hljs-params">distance:number = <span class="hljs-number">0</span></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.name&#125;</span>跑了<span class="hljs-subst">$&#123;distance&#125;</span>米这么远的距离`</span>)<br>    &#125;<br>&#125;<br><span class="hljs-comment">// 定义一个子类</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Dog</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Animal</span> </span>&#123;<br>    <span class="hljs-comment">// 构造函数</span><br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">name:string</span>)</span> &#123;<br>        <span class="hljs-comment">// 调用父类的构造函数，实现子类属性的初始化操作</span><br>        <span class="hljs-built_in">super</span>(name)<br>    &#125;<br>    <span class="hljs-comment">// 实例方法，重写父类中的实例方法</span><br>    <span class="hljs-function"><span class="hljs-title">run</span>(<span class="hljs-params">distance:number = <span class="hljs-number">5</span></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.name&#125;</span>跑了<span class="hljs-subst">$&#123;distance&#125;</span>米这么远的距离`</span>)<br>    &#125;<br>&#125;<br><span class="hljs-comment">// 定义一个子类</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Pig</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Animal</span> </span>&#123;<br>    <span class="hljs-comment">// 构造函数</span><br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">name:string</span>)</span> &#123;<br>        <span class="hljs-comment">// 调用父类的构造函数，实现子类属性的初始化操作</span><br>        <span class="hljs-built_in">super</span>(name)<br>    &#125;<br>    <span class="hljs-comment">// 实例方法，重写父类中的实例方法</span><br>    <span class="hljs-function"><span class="hljs-title">run</span>(<span class="hljs-params">distance:number = <span class="hljs-number">10</span></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.name&#125;</span>跑了<span class="hljs-subst">$&#123;distance&#125;</span>米这么远的距离`</span>)<br>    &#125;<br>&#125;<br><br><span class="hljs-comment">// 实例化父类对象</span><br><span class="hljs-keyword">const</span> animal: Animal = <span class="hljs-keyword">new</span> Animal(<span class="hljs-string">&#x27;动物&#x27;</span>)<br>animal.run()<br><span class="hljs-comment">// 实例化子类对象</span><br><span class="hljs-keyword">const</span> dog: Dog = <span class="hljs-keyword">new</span> Dog(<span class="hljs-string">&#x27;大黄&#x27;</span>)<br>dog.run()<br><span class="hljs-comment">// 实例化子类对象</span><br><span class="hljs-keyword">const</span> pig: Pig = <span class="hljs-keyword">new</span> Pig(<span class="hljs-string">&#x27;乔治&#x27;</span>)<br>pig.run()<br><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;====================&#x27;</span>)  <br><span class="hljs-comment">// 父类和子类的关系：父子关系，此时，父类类型创建子类的对象</span><br><br><span class="hljs-keyword">const</span> dog1: Animal = <span class="hljs-keyword">new</span> Dog(<span class="hljs-string">&#x27;小黄&#x27;</span>)<br>dog1.run()<br><span class="hljs-keyword">const</span> pig1: Animal = <span class="hljs-keyword">new</span> Pig(<span class="hljs-string">&#x27;佩奇&#x27;</span>)<br>pig1.run()<br><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;====================&#x27;</span>)  <br><span class="hljs-comment">// 该函数需要的参数是 Animal 类型的</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">showRun</span>(<span class="hljs-params">animal:Animal</span>) </span>&#123;<br>    animal.run()<br>&#125;<br><br>showRun(dog1)<br>showRun(pig1)<br></code></pre></div></td></tr></table></figure>

<h4 id="修饰符"><a href="#修饰符" class="headerlink" title="修饰符"></a>修饰符</h4><p>修饰符(类中的成员的修饰符)：主要是描述类中的成员(属性，构造函数，方法)的可访问性</p>
<h5 id="public"><a href="#public" class="headerlink" title="public"></a>public</h5><p>公共的</p>
<p>类中的成员都有自己默认的访问修饰符 public</p>
<p>类中的成员默认的修饰符，代表的是公共的，任何位置都可以访问类中的成员</p>
<h5 id="private"><a href="#private" class="headerlink" title="private"></a>private</h5><p>私有的</p>
<p>外部无法访问这个成员数据，子类中也无法访问</p>
<h5 id="protected"><a href="#protected" class="headerlink" title="protected"></a>protected</h5><p>受保护的</p>
<p>外部无法访问这个成员数据，子类可访问</p>
<h5 id="readonly"><a href="#readonly" class="headerlink" title="readonly"></a>readonly</h5><p>只读的</p>
<p>可以对类中的属性成员进行修饰，该属性成员，就不能再外部被随意的修改了</p>
<ul>
<li>构造函数中可以对只读的属性成员的数据进行修改</li>
<li>如果构造函数中没有任何的参数，类中的属性成员此时使用 readonly 进行修饰了，那么外部也是不能对这个属性值进行更改的</li>
<li>构造函数中的参数可以使用readonly 进行修饰,一旦修饰,那么该类中就有了这个只读的成员属性了,外部可以访问,但是不能修改</li>
<li>构造函数中的参数可以使用 public及private及protected 进行修饰,无论是哪个进行修饰,那么该类中都会自动的添加这么一个属性成员</li>
</ul>
<h4 id="存储器-get-set"><a href="#存储器-get-set" class="headerlink" title="存储器(get set)"></a>存储器(get set)</h4><p>TypeScript 支持通过 <code>getters/setters</code> 来截取对对象成员的访问。 </p>
<p>让我们可以有效的控制对对象成员的访问,通过getters和setters来进行操作</p>
<p>例：</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 外部可以传入姓氏和名字数据,同时使用set和get控制姓名的数据,外部也可以修改操作</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> </span>&#123;<br>    <span class="hljs-attr">firstName</span>:string <span class="hljs-comment">// 姓氏</span><br>    <span class="hljs-attr">lastName</span>:string  <span class="hljs-comment">// 名字</span><br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">firstName:string,lastName:string</span>)</span> &#123;<br>        <span class="hljs-built_in">this</span>.firstName = firstName<br>        <span class="hljs-built_in">this</span>.lastName = lastName<br>    &#125;<br><span class="hljs-comment">// 姓名的成员属性(外部可以访问,也可以修改)</span><br><br><span class="hljs-comment">// 读取器 ------&gt; 负责读取数据</span><br><span class="hljs-keyword">get</span> <span class="hljs-title">fullName</span>() &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;get中...&#x27;</span>)<br>    <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.firstName + <span class="hljs-string">&#x27;_&#x27;</span> + <span class="hljs-built_in">this</span>.lastName<br>&#125;<br><span class="hljs-comment">// 设置器 ------&gt; 负责修改数据</span><br><span class="hljs-keyword">set</span> <span class="hljs-title">fullName</span>(<span class="hljs-params">val</span>) &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;set中...&#x27;</span>)<br>    <span class="hljs-keyword">let</span> names = val.split(<span class="hljs-string">&#x27;_&#x27;</span>)<br>    <span class="hljs-built_in">this</span>.firstName = names[<span class="hljs-number">0</span>]<br>    <span class="hljs-built_in">this</span>.lastName = names[<span class="hljs-number">1</span>]<br>&#125;<br>&#125;<br><br><span class="hljs-comment">// 实例化对象</span><br><span class="hljs-keyword">const</span> person:Person = <span class="hljs-keyword">new</span> Person(<span class="hljs-string">&#x27;东方&#x27;</span>, <span class="hljs-string">&#x27;不败&#x27;</span>)<br><span class="hljs-built_in">console</span>.log(person)<br><span class="hljs-comment">// 获取该属性成员数据</span><br><span class="hljs-built_in">console</span>.log(person.fullName)<br><span class="hljs-comment">// 设置该属性的数据</span><br>person.fullName = <span class="hljs-string">&#x27;诸葛_孔明&#x27;</span><br><span class="hljs-built_in">console</span>.log(person)<br></code></pre></div></td></tr></table></figure>

<p><img src="/2021/07/30/TypeScript%E7%AC%94%E8%AE%B0/image-20210625193104527.png" srcset="/img/loading2.gif" lazyload alt="image-20210625193104527"></p>
<h4 id="静态属性-static"><a href="#静态属性-static" class="headerlink" title="静态属性(static)"></a>静态属性(static)</h4><p>静态成员:在类中通过 static 修饰的属性或方法,就是静态的属性及方法</p>
<p>静态成员在使用时是通过 类名. 的这种做法来调用的</p>
<h4 id="抽象类-abstract"><a href="#抽象类-abstract" class="headerlink" title="抽象类(abstract)"></a>抽象类(abstract)</h4><p>含抽象方法（抽象方法一般没有任何的具体内容的实现），也可以包含实例方法，抽象类是不能被实例化的,为了让子类进行实例化及实现内部的抽象方法</p>
<p>抽象类的目的或者是作用都是为子类服务的</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 定义一个类</span><br>abstract <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Animal</span> </span>&#123;<br>    <span class="hljs-comment">// 抽象属性 一般不这么实现</span><br>    <span class="hljs-comment">// abstract name:string</span><br>    <span class="hljs-comment">// 抽象方法</span><br>    abstract eat()<br>    <span class="hljs-comment">// 实例方法</span><br>    <span class="hljs-function"><span class="hljs-title">sayHi</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;您好啊&#x27;</span>)<br>    &#125;<br>&#125;<br><span class="hljs-comment">// 定义一个子类（派生类）Dog</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Dog</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Animal</span> </span>&#123;<br>    <span class="hljs-comment">// name:string = &#x27;Lay&#x27;</span><br>    <span class="hljs-comment">// 重新的实现抽象类中的方法，此时这个方法就是当前抽象类的实例方法了</span><br>    <span class="hljs-function"><span class="hljs-title">eat</span>(<span class="hljs-params"></span>)</span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;舔着吃，真好吃&#x27;</span>);<br>    &#125;<br>&#125;<br><br><span class="hljs-comment">// 实例化 Dog 的对象</span><br><span class="hljs-keyword">const</span> dog:Dog = <span class="hljs-keyword">new</span> Dog()<br>dog.eat()<br><span class="hljs-comment">// 调用的是抽象类中的实例方法</span><br>dog.sayHi()<br><span class="hljs-comment">// console.log(dog.name);</span><br><br><span class="hljs-comment">// 不能实例化抽象类的对象</span><br><span class="hljs-comment">// const ani:Animal = new Animal()</span><br></code></pre></div></td></tr></table></figure>

<h3 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h3><h4 id="基本写法"><a href="#基本写法" class="headerlink" title="基本写法"></a>基本写法</h4><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 函数声明，命名函数</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">add</span>(<span class="hljs-params">x:string, y:string</span>):<span class="hljs-title">string</span> </span>&#123; <span class="hljs-comment">// 求和的函数</span><br>    <span class="hljs-keyword">return</span> x + y<br>&#125;<br><span class="hljs-keyword">const</span> result1:string = add(<span class="hljs-string">&#x27;111&#x27;</span>,<span class="hljs-string">&#x27;222&#x27;</span>)<br><span class="hljs-built_in">console</span>.log(result1) <span class="hljs-comment">// &#x27;111222&#x27;</span><br><br><span class="hljs-comment">// 函数表达式，匿名函数</span><br><span class="hljs-keyword">const</span> add2 = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">x:number, y:number</span>):<span class="hljs-title">number</span> </span>&#123;<br>    <span class="hljs-keyword">return</span> x + y<br>&#125;<br><span class="hljs-keyword">const</span> result2:number = add2(<span class="hljs-number">111</span>,<span class="hljs-number">222</span>)<br><span class="hljs-built_in">console</span>.log(result2) <span class="hljs-comment">// 333</span><br><br><span class="hljs-comment">// 函数的完整写法</span><br><span class="hljs-comment">// add3 ----&gt; 变量名 ----&gt; 函数add3</span><br><span class="hljs-comment">// (x:number, y:number) =&gt; number 当前这个函数的类型</span><br><span class="hljs-comment">// function (x:number, y:number):number &#123; return x + y &#125; 相当于上面的这个函数类型的值</span><br><span class="hljs-keyword">const</span> add3:<span class="hljs-function">(<span class="hljs-params">x:number, y:number</span>) =&gt;</span> number = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">x:number, y:number</span>):<span class="hljs-title">number</span> </span>&#123;<br>    <span class="hljs-keyword">return</span> x + y<br>&#125;<br><span class="hljs-keyword">const</span> result3:number = add3(<span class="hljs-number">10</span>,<span class="hljs-number">1</span>)<br><span class="hljs-built_in">console</span>.log(result3) <span class="hljs-comment">// 11</span><br></code></pre></div></td></tr></table></figure>

<h4 id="可选参数和默认参数"><a href="#可选参数和默认参数" class="headerlink" title="可选参数和默认参数"></a>可选参数和默认参数</h4><ul>
<li>可选参数:函数在声明时,内部的函数使用了 <code>?</code> 进行修饰,就表示该参数可以传入也可以不传入</li>
<li>默认参数:函数在声明的时候,内部的参数有自己的默认值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 定义一个函数:传入姓氏和名字,可以得到姓名</span><br><span class="hljs-comment">// 需求:如果不传入任何内容,那么就返回默认的姓氏</span><br><span class="hljs-comment">// 如果只传入姓氏,那么就返回姓氏</span><br><span class="hljs-comment">// 如果传入姓氏和名字,那么返回来的就是姓名</span><br><span class="hljs-keyword">const</span> getFullName = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">firstName:string=<span class="hljs-string">&#x27;东方&#x27;</span>,lastName?:string</span>) </span>&#123;<br>    <span class="hljs-comment">// 判断名字是否传入</span><br>    <span class="hljs-keyword">if</span> (lastName) &#123;<br>        <span class="hljs-keyword">return</span> firstName + <span class="hljs-string">&#x27;_&#x27;</span> + lastName<br>    &#125; <span class="hljs-keyword">else</span> &#123;<br>        <span class="hljs-keyword">return</span> firstName<br>    &#125;<br>&#125;<br><br><span class="hljs-comment">// 函数调用</span><br><span class="hljs-built_in">console</span>.log(getFullName(<span class="hljs-string">&#x27;张&#x27;</span>, <span class="hljs-string">&#x27;艺兴&#x27;</span>));<br></code></pre></div></td></tr></table></figure>

<h4 id="剩余参数"><a href="#剩余参数" class="headerlink" title="剩余参数"></a>剩余参数</h4><p>剩余参数(rest参数)是放在函数声明的时候所有的参数最后</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// ...args:string[] ----&gt; 剩余的参数是放在了一个字符串的数组当中</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">showMsg</span>(<span class="hljs-params">str:string, ...args:string[]</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(str);<br>    <span class="hljs-built_in">console</span>.log(args);<br>&#125;<br>showMsg(<span class="hljs-string">&#x27;a&#x27;</span>,<span class="hljs-string">&#x27;b&#x27;</span>,<span class="hljs-string">&#x27;c&#x27;</span>,<span class="hljs-string">&#x27;d&#x27;</span>,<span class="hljs-string">&#x27;e&#x27;</span>)<br></code></pre></div></td></tr></table></figure>

<h4 id="函数重载"><a href="#函数重载" class="headerlink" title="函数重载"></a>函数重载</h4><p>函数名字相同,函数的参数及个数不同</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 定义一个函数</span><br><span class="hljs-comment">// 需求: 我们有一个add函数，它可以接收2个string类型的参数进行拼接，也可以接收2个number类型的参数进行相加</span><br><br><span class="hljs-comment">// 函数重载声明</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">add</span>(<span class="hljs-params">x: string, y: string</span>): <span class="hljs-title">string</span></span><br><span class="hljs-function"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">add</span>(<span class="hljs-params">x: number, y: number</span>): <span class="hljs-title">number</span></span></span><br><span class="hljs-function"><span class="hljs-function"></span></span><br><span class="hljs-function"><span class="hljs-function">// 函数声明</span></span><br><span class="hljs-function"><span class="hljs-function"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">add</span>(<span class="hljs-params">x: string | number, y: string | number</span>): <span class="hljs-title">string</span> | <span class="hljs-title">number</span> </span>&#123;</span></span><br><span class="hljs-function"><span class="hljs-function">    <span class="hljs-title">if</span> (<span class="hljs-params"><span class="hljs-keyword">typeof</span> x === <span class="hljs-string">&#x27;string&#x27;</span> &amp;&amp; <span class="hljs-keyword">typeof</span> y === <span class="hljs-string">&#x27;string&#x27;</span></span>) </span>&#123;</span><br><span class="hljs-function">        <span class="hljs-title">return</span> <span class="hljs-title">x</span> + <span class="hljs-title">y</span> // 字符串拼接</span><br><span class="hljs-function">    &#125; <span class="hljs-title">else</span> <span class="hljs-title">if</span> (<span class="hljs-params"><span class="hljs-keyword">typeof</span> x === <span class="hljs-string">&#x27;number&#x27;</span> &amp;&amp; <span class="hljs-keyword">typeof</span> y === <span class="hljs-string">&#x27;number&#x27;</span></span>) </span>&#123;<br>        <span class="hljs-keyword">return</span> x + y <span class="hljs-comment">// 数组相加</span><br>    &#125;<br>&#125;<br><br><span class="hljs-comment">// 函数调用</span><br><span class="hljs-comment">// 两个参数都是字符串</span><br><span class="hljs-built_in">console</span>.log(add(<span class="hljs-string">&#x27;张&#x27;</span>, <span class="hljs-string">&#x27;艺兴&#x27;</span>))<br><span class="hljs-comment">// 两个参数都是数字</span><br><span class="hljs-built_in">console</span>.log(add(<span class="hljs-number">10</span>, <span class="hljs-number">1</span>))<br><span class="hljs-comment">// 如果传入的是非法的数据, ts 应该给我提示出错误的信息内容</span><br><span class="hljs-comment">// console.log(add(&#x27;张&#x27;, 13))</span><br><span class="hljs-comment">// console.log(add(14, &#x27;13&#x27;))</span><br></code></pre></div></td></tr></table></figure>

<h3 id="泛型"><a href="#泛型" class="headerlink" title="泛型"></a>泛型</h3><p>在定义函数、接口、类的时候不能预先确定要使用的数据的类型，而是在使用函数、接口、类的时候才能确定数据的类型</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 需求：定义一个函数，传入两个参数，第一参数是数据。第二参数是数量，函数的作用是根据数量产生对应个数的数据，存放在以一个数组中</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getArr4</span>&lt;<span class="hljs-title">T</span>&gt;(<span class="hljs-params">value:T,count:number</span>):<span class="hljs-title">T</span>[] </span>&#123;<br>    <span class="hljs-comment">// 根据数据和数量产生一个数组</span><br>    <span class="hljs-comment">// const arr : T[] = []</span><br>    <span class="hljs-keyword">const</span> arr:<span class="hljs-built_in">Array</span>&lt;T&gt; = []<br>    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; count; i++) &#123;<br>        arr.push(value)<br>    &#125;<br>    <span class="hljs-keyword">return</span> arr<br>&#125;<br><span class="hljs-keyword">const</span> arr3 = getArr4&lt;number&gt;(<span class="hljs-number">200.12345</span>,<span class="hljs-number">5</span>)<br><span class="hljs-keyword">const</span> arr4 = getArr4&lt;string&gt;(<span class="hljs-string">&#x27;AgoniLay&#x27;</span>,<span class="hljs-number">5</span>)<br><span class="hljs-built_in">console</span>.log(arr3)<br><span class="hljs-built_in">console</span>.log(arr4)<br><span class="hljs-comment">// // arr3中存储的是数字类型的数据</span><br><span class="hljs-comment">// // arr4中存储的是字符串类型的数据</span><br><span class="hljs-built_in">console</span>.log(arr3[<span class="hljs-number">0</span>].toFixed(<span class="hljs-number">3</span>))<br><span class="hljs-built_in">console</span>.log(arr4[<span class="hljs-number">0</span>].split(<span class="hljs-string">&#x27;&#x27;</span>))<br></code></pre></div></td></tr></table></figure>

<h4 id="多个泛型参数的函数"><a href="#多个泛型参数的函数" class="headerlink" title="多个泛型参数的函数"></a>多个泛型参数的函数</h4><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getMsg</span>&lt;<span class="hljs-title">K</span>, <span class="hljs-title">V</span>&gt;(<span class="hljs-params">value1: K, value2: V</span>): [<span class="hljs-title">K</span>, <span class="hljs-title">V</span>] </span>&#123;<br>    <span class="hljs-keyword">return</span> [value1, value2]<br>&#125;<br><br><span class="hljs-keyword">const</span> arr1 = getMsg&lt;string,number&gt;(<span class="hljs-string">&#x27;AgoniLay&#x27;</span>, <span class="hljs-number">100</span>)<br><span class="hljs-built_in">console</span>.log(arr1[<span class="hljs-number">0</span>].split(<span class="hljs-string">&#x27;&#x27;</span>))<br><span class="hljs-built_in">console</span>.log(arr1[<span class="hljs-number">1</span>].toFixed(<span class="hljs-number">2</span>))<br></code></pre></div></td></tr></table></figure>

<h4 id="泛型接口"><a href="#泛型接口" class="headerlink" title="泛型接口"></a>泛型接口</h4><p>在定义接口时, 为接口中的属性或方法定义泛型类型，在使用接口时, 再指定具体的泛型类型</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 需求：定义一个类，用来存储用户的相关信息（id，名字，年龄）</span><br><span class="hljs-comment">// 通过一个类的实例对象调用 add 方法可以添加多个用户信息对象，调用 getUserId 可以根据id 获取某个指定的用户信息对象</span><br><br><span class="hljs-comment">// 定义一个泛型接口</span><br>interface IBaseCRUD&lt;T&gt; &#123;<br>    <span class="hljs-attr">data</span>: <span class="hljs-built_in">Array</span>&lt;T&gt;<br>    add: <span class="hljs-function">(<span class="hljs-params">t: T</span>) =&gt;</span> T<br>    <span class="hljs-attr">getUserId</span>: <span class="hljs-function">(<span class="hljs-params">id: number</span>) =&gt;</span> T<br>&#125;<br><br><span class="hljs-comment">// 定义一个用户信息的类</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">User</span> </span>&#123;<br>    id?: number  <span class="hljs-comment">// 用户的id</span><br>    <span class="hljs-attr">name</span>: string  <span class="hljs-comment">// 用户的姓名</span><br>    <span class="hljs-attr">age</span>: number  <span class="hljs-comment">// 用户的年龄</span><br>    <span class="hljs-comment">// 构造函数</span><br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">name: string, age: number</span>)</span> &#123;<br>        <span class="hljs-built_in">this</span>.name = name<br>        <span class="hljs-built_in">this</span>.age = age<br>    &#125;<br>&#125;<br><span class="hljs-comment">// 定义一个类，可以针对用户的信息对象进行增加及查询的操作</span><br><span class="hljs-comment">// CRUD ----&gt; Create Read Update Delete</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UserCRUD</span> <span class="hljs-title">implements</span> <span class="hljs-title">IBaseCRUD</span>&lt;<span class="hljs-title">User</span>&gt; </span>&#123;<br>    <span class="hljs-comment">// 用来保存多个 User 类型的用户信息对象</span><br>    <span class="hljs-attr">data</span>: <span class="hljs-built_in">Array</span>&lt;User&gt; = []<br>    <span class="hljs-comment">// 方法用来存储用户信息对象的</span><br>    add(user: User): User &#123;<br>        <span class="hljs-comment">// 产生 id</span><br>        user.id = <span class="hljs-built_in">Date</span>.now() + <span class="hljs-built_in">Math</span>.random()<br>        <span class="hljs-comment">// 把用户信息对象添加到data数组中</span><br>        <span class="hljs-built_in">this</span>.data.push(user)<br>        <span class="hljs-keyword">return</span> user<br>    &#125;<br>    <span class="hljs-comment">// 根据id查询指定的用户信息对象</span><br>    getUserId(id: number): User &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.data.find(<span class="hljs-function"><span class="hljs-params">user</span> =&gt;</span> user.id === id)<br>    &#125;<br>&#125;<br><br><span class="hljs-comment">// 实例化添加用户信息对象的类 UserCRUD</span><br><span class="hljs-keyword">const</span> userCRUD: UserCRUD = <span class="hljs-keyword">new</span> UserCRUD()<br>userCRUD.add(<span class="hljs-keyword">new</span> User(<span class="hljs-string">&#x27;agoni&#x27;</span>, <span class="hljs-number">20</span>))<br>userCRUD.add(<span class="hljs-keyword">new</span> User(<span class="hljs-string">&#x27;lay&#x27;</span>, <span class="hljs-number">18</span>))<br><span class="hljs-keyword">const</span> &#123;id&#125; = userCRUD.add(<span class="hljs-keyword">new</span> User(<span class="hljs-string">&#x27;Lay&#x27;</span>, <span class="hljs-number">18</span>))<br>userCRUD.add(<span class="hljs-keyword">new</span> User(<span class="hljs-string">&#x27;AgoniLay&#x27;</span>, <span class="hljs-number">19</span>))<br><br><span class="hljs-built_in">console</span>.log(userCRUD.data)<br><span class="hljs-comment">// 根据 id 查询用户信息对象数据</span><br><span class="hljs-keyword">const</span> user = userCRUD.getUserId(id)<br><span class="hljs-built_in">console</span>.log(user)<br></code></pre></div></td></tr></table></figure>

<h4 id="泛型类"><a href="#泛型类" class="headerlink" title="泛型类"></a>泛型类</h4><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 定义一个类，类中的属性值是不确定的，方法中的参数及返回值的类型也是不确定的</span><br><span class="hljs-comment">// 定义一个泛型类</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">GenericNumber</span>&lt;<span class="hljs-title">T</span>&gt; </span>&#123;<br>    <span class="hljs-comment">// 默认的属性的值的类型是泛型类型</span><br>    <span class="hljs-attr">defaultValue</span>: T<br>    <span class="hljs-attr">add</span>: <span class="hljs-function">(<span class="hljs-params">x: T, y: T</span>) =&gt;</span> T<br>&#125;<br><br><span class="hljs-comment">// 在实例化类的对象的时候，再确定泛型的类型</span><br><span class="hljs-keyword">const</span> g1: GenericNumber&lt;number&gt; = <span class="hljs-keyword">new</span> GenericNumber&lt;number&gt;()<br><span class="hljs-comment">// 设置属性值</span><br>g1.defaultValue = <span class="hljs-number">100</span><br><span class="hljs-comment">// 相加的方法</span><br>g1.add = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">x, y</span>) </span>&#123;<br>    <span class="hljs-keyword">return</span> x + y<br>&#125;<br><span class="hljs-built_in">console</span>.log(g1.add(g1.defaultValue, <span class="hljs-number">1</span>))<br><br><span class="hljs-comment">// 在实例化类的对象的时候，再确定泛型的类型</span><br><span class="hljs-keyword">const</span> g2: GenericNumber&lt;string&gt; = <span class="hljs-keyword">new</span> GenericNumber&lt;string&gt;()<br><span class="hljs-comment">// 设置属性值</span><br>g2.defaultValue = <span class="hljs-string">&#x27;哈哈&#x27;</span><br><span class="hljs-comment">// 相加的方法</span><br>g2.add = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">x, y</span>) </span>&#123;<br>    <span class="hljs-keyword">return</span> x + y<br>&#125;<br><span class="hljs-built_in">console</span>.log(g2.add(<span class="hljs-string">&#x27;Agoni&#x27;</span>, <span class="hljs-string">&#x27;Lay&#x27;</span>))<br></code></pre></div></td></tr></table></figure>

<h4 id="泛型约束"><a href="#泛型约束" class="headerlink" title="泛型约束"></a>泛型约束</h4><figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">// 如果我们直接对一个泛型参数取 length 属性, 会报错, 因为这个泛型根本就不知道它有这个属性</span><br><span class="hljs-comment">// 定义一个接口,用来约束将来的某个类型中必须要有 length 这个属性</span><br>interface ILength &#123;<br>    <span class="hljs-comment">// 接口中有一个属性 length</span><br>    <span class="hljs-attr">length</span>: number<br>&#125;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getLength</span>&lt;<span class="hljs-title">T</span> <span class="hljs-title">extends</span> <span class="hljs-title">ILength</span>&gt;(<span class="hljs-params">x: T</span>): <span class="hljs-title">number</span> </span>&#123;<br>    <span class="hljs-keyword">return</span> x.length<br>&#125;<br><br><span class="hljs-built_in">console</span>.log(getLength&lt;string&gt;(<span class="hljs-string">&#x27;How are you&#x27;</span>))<br><span class="hljs-comment">// console.log(getLength&lt;number&gt;(123))</span><br></code></pre></div></td></tr></table></figure>

<h3 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h3><h4 id="声明文件"><a href="#声明文件" class="headerlink" title="声明文件"></a>声明文件</h4><h5 id="例：jQuery"><a href="#例：jQuery" class="headerlink" title="例：jQuery"></a>例：jQuery</h5><p>当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。</p>
<h6 id="声明语句"><a href="#声明语句" class="headerlink" title="声明语句:"></a>声明语句:</h6><p>如果需要ts对新的语法进行检查, 需要要加载了对应的类型说明代码</p>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js">declare <span class="hljs-keyword">var</span> jQuery: <span class="hljs-function">(<span class="hljs-params">selector: string</span>) =&gt;</span> any;<br></code></pre></div></td></tr></table></figure>

<h6 id="声明文件-1"><a href="#声明文件-1" class="headerlink" title="声明文件:"></a>声明文件:</h6><p>把声明语句放到一个单独的文件（jQuery.d.ts）中, ts会自动解析到项目中所有声明文件</p>
<p>下载自动识别的：</p>
<figure class="highlight php"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs php"><span class="hljs-comment">// 安装 jquery</span><br>npm i jquery<br><span class="hljs-comment">// 安装声明文件</span><br>npm i @types/jquery --save-dev<br></code></pre></div></td></tr></table></figure>

<h4 id="内置对象"><a href="#内置对象" class="headerlink" title="内置对象"></a>内置对象</h4><p>JavaScript 中有很多内置对象，它们可以直接在 TypeScript 中当做定义好了的类型。</p>
<p>内置对象是指根据标准在全局作用域（Global）上存在的对象。这里的标准是指 ECMAScript 和其他环境（比如 DOM）的标准。</p>
<h5 id="ECMAScript-的内置对象"><a href="#ECMAScript-的内置对象" class="headerlink" title="ECMAScript 的内置对象"></a>ECMAScript 的内置对象</h5><ul>
<li>Boolean</li>
<li>Number</li>
<li>String</li>
<li>Date</li>
<li>RegExp</li>
<li>Error</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-comment">/* 1. ECMAScript 的内置对象 */</span><br><span class="hljs-keyword">let</span> b: <span class="hljs-built_in">Boolean</span> = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Boolean</span>(<span class="hljs-number">1</span>)<br><span class="hljs-keyword">let</span> n: <span class="hljs-built_in">Number</span> = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Number</span>(<span class="hljs-literal">true</span>)<br><span class="hljs-keyword">let</span> s: <span class="hljs-built_in">String</span> = <span class="hljs-keyword">new</span> <span class="hljs-built_in">String</span>(<span class="hljs-string">&#x27;abc&#x27;</span>)<br><span class="hljs-keyword">let</span> d: <span class="hljs-built_in">Date</span> = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()<br><span class="hljs-keyword">let</span> r: <span class="hljs-built_in">RegExp</span> = <span class="hljs-regexp">/^1/</span><br><span class="hljs-keyword">let</span> e: <span class="hljs-built_in">Error</span> = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">&#x27;error message&#x27;</span>)<br>b = <span class="hljs-literal">true</span><br><span class="hljs-comment">// let bb: boolean = new Boolean(2)  // error</span><br></code></pre></div></td></tr></table></figure>

<h5 id="BOM-和-DOM-的内置对象"><a href="#BOM-和-DOM-的内置对象" class="headerlink" title="BOM 和 DOM 的内置对象"></a>BOM 和 DOM 的内置对象</h5><ul>
<li>Window</li>
<li>Document</li>
<li>HTMLElement</li>
<li>DocumentFragment</li>
<li>Event</li>
<li>NodeList</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs js"><span class="hljs-keyword">const</span> div: HTMLElement = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&#x27;test&#x27;</span>)<br><span class="hljs-keyword">const</span> divs: NodeList = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">&#x27;div&#x27;</span>)<br><span class="hljs-built_in">document</span>.addEventListener(<span class="hljs-string">&#x27;click&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">event: MouseEvent</span>) =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.dir(event.target)<br>&#125;)<br><span class="hljs-keyword">const</span> fragment: DocumentFragment = <span class="hljs-built_in">document</span>.createDocumentFragment()<br></code></pre></div></td></tr></table></figure>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/JavaScript/">JavaScript</a>
                    
                      <a class="hover-with-bg" href="/tags/TypeScript/">TypeScript</a>
                    
                      <a class="hover-with-bg" href="/tags/webpack/">webpack</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均为本人原创，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2021/07/30/JavaScript%E7%AC%94%E8%AE%B0-%E4%B8%80/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">JavaScript笔记(一)</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2021/07/29/php%E7%AC%94%E8%AE%B0/">
                        <span class="hidden-mobile">php笔记</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->

  <div class="col-lg-7 mx-auto nopadding-x-md">
    <div class="container custom post-custom mx-auto">
      <img src="/img/agoni.gif" srcset="/img/loading2.gif" lazyload class="rounded mx-auto d-block mt-5" style="width:150px; height:150px;"> <h5 style="text-align: center; margin-top: 1rem;">谢谢您的光临噢！！！</h5> 
    </div>
  </div>


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <span>张宝文</span> <i class="iconfont icon-love"></i> <span>郑佳丽</span>  
	<!--《添加网站运行时间 -->
<br/>

<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date(); 

function createtime() {
    //此处修改你的建站时间或者网站上线时间
    var grt = new Date('07/28/2021 19:00:00');
    now.setTime(now.getTime() + 250);
    days = (now - grt) / 1000 / 60 / 60 / 24;

    dnum = Math.floor(days);
    hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
    hnum = Math.floor(hours);
    if (String(hnum).length == 1) {
        hnum = "0" + hnum;
    }
    minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes);
    if (String(mnum).length == 1) {
        mnum = "0" + mnum;
    }
    seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds);
    if (String(snum).length == 1) {
        snum = "0" + snum;
    }
    document.getElementById("timeDate").innerHTML = " 本站已各种夹缝中安全运行 " + dnum + " 天 ";
    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()", 250);
</script>

<!-- 添加网站运行时间》-->
  </div>
  
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/js/img-lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.3/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.1/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js" ></script>



  <script  src="/js/local-search.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" ></script>
  <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

  <script>
    function typing(id, title){
        var typed = new Typed('#' + id, {
            strings: [
              '  ',
              title + "&nbsp;",
            ],
            cursorChar: "❤",
            typeSpeed: 150,
            loop: false,
        });
        typed.stop();
        $(document).ready(function () {
            $(".typed-cursor").addClass("h2");
            typed.start();
        });
    }

    
        typing("subtitle", document.getElementById('subtitle').title)
    

  </script>













  
<script src="//cdn.jsdelivr.net/gh/bynotes/texiao/source/js/yinghua.js"></script>



<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>

</body>
</html>
